<template>
	<view>
		<view class="wf-message-input-container">
			<view class="wf-message-input-toolbar">
				<view class="wf-input-button-icon wxfont" @click="toggleVoice" :class="showVoice ? 'keyboard' : 'voice'"></view>
				<view class="wf-input-voice-container" v-if="showVoice">
					<AudioInputView :conversation-info="conversationInfo"></AudioInputView>
				</view>
				<view v-else style="width: 100%">
					<view class="wf-input-text-container">
						<textarea
							ref="textarea"
							@focus="onInputFocus"
							:focus="inputFocus"
							class="wf-input-textarea"
							@input="onInput"
							:value="text"
							placeholder=""
							hold-keyboard
							confirm-type="send"
							@confirm="send(text)"
							:maxlength="-1"
							auto-height
						/>
					</view>
					<view v-if="sharedConversationState.quotedMessage" class="quote-message-container">
						<view class="quoted-message single-line">{{
							sharedConversationState.quotedMessage.messageContent.digest(sharedConversationState.quotedMessage)
						}}</view>
						<view class="cancel icon-ion-close" @click="cancelQuote"></view>
					</view>
				</view>
				<view @click.prevent="toggleEmoji" class="wf-input-button-icon wxfont emoji"></view>
				<view
					v-if="!hideSendButton && text !== ''"
					class="wf-input-text-send-button"
					@touchstart.prevent=""
					@touchmove.prevent=""
					@touchend.prevent="send(text)"
					:style="{
						background: text !== '' ? '#4168e0' : '#F7F7F7',
						color: text !== '' ? '#fff' : '#ddd',
						'border-color': text !== '' ? '#1BC418' : '#ddd'
					}"
					>发送
				</view>
				<view v-if="hideSendButton || text === ''" @click="toggleExt" class="wf-input-button-icon wxfont add2"></view>
			</view>
			<view v-if="showExt" class="wf-ext-container" :style="'height: ' + keyboardHeight + 'px'">
				<view class="wf-ext-item" v-for="(v, i) in extList" @click="onClickExt(v)" :key="i">
					<view class="wf-ext-item-icon">
						<view class="wxfont" :class="v.icon"></view>
					</view>
					<view class="wf-ext-item-text">{{ v.title }}</view>
				</view>
			</view>
			<!--            <scroll-view :scroll-y="true" v-if="showEmoji" class="wf-emoji-container">-->
			<!--                <view class="wf-emoji-content">-->
			<!--                    <view class="emoji-item" @click="onClickEmoji(v)" v-for="(v,i) in emojiList" :key="i">{{ v }}</view>-->

			<!--                </view>-->
			<!--            </scroll-view>-->
			<view v-if="showEmoji" class="wf-stickers-container" :style="'height: ' + keyboardHeight + 'px'">
				<view class="category-container">
					<view class="category" v-for="(v, i) in emojiStickerList" :key="i" @click="onCategoryClick(i)">
						<img :src="v.poster" v-bind:class="{ active: i === currentEmojiStickerIndex }" />
					</view>
				</view>
				<scroll-view
					v-if="currentEmojiStickerIndex === 0"
					:scroll-y="true"
					class="wf-emoji-container"
					:style="'height: ' + (keyboardHeight - 60) + 'px'"
				>
					<view class="wf-emoji-content">
						<view class="emoji-item" @click="onClickEmoji(v)" v-for="(v, i) in emojiStickerList[0].emojis" :key="i">{{
							v
						}}</view>
					</view>
				</scroll-view>
				<scroll-view
					v-else
					:scroll-y="true"
					class="wf-sticker-container"
					:style="'height: ' + (keyboardHeight - 60) + 'px'"
				>
					<view class="wf-sticker-content">
						<img
							:src="s"
							class="sticker-item"
							@click="onClickSticker(s)"
							v-for="(s, j) in emojiStickerList[currentEmojiStickerIndex].stickers"
							:key="j"
						/>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import TextMessageContent from '../../wfc/messages/textMessageContent'
	import ConversationInfo from '../../wfc/model/conversationInfo'
	import wfc from '../../wfc/client/wfc'
	import store from '../../store'
	import ConversationType from '../../wfc/model/conversationType'
	import wfcUIKit from '../../wfc/uikit/wfcUIKit'
	import emojiStickerConfig from './emojiStickerConfig'
	import StickerMessageContent from '../../wfc/messages/stickerMessageContent'
	import Config from '../../config'
	import QuoteInfo from '../../wfc/model/quoteInfo'
	import AudioInputView from './message/AudioInputView.vue'
	import Draft from '../util/draft'
	import Mention from '../../wfc/model/mention'

	export default {
		name: 'MessageInputView',
		components: { AudioInputView },
		props: {
			conversationInfo: {
				type: ConversationInfo,
				required: true,
				default: null
			}
		},
		data() {
			return {
				emojiStickerList: emojiStickerConfig,
				currentEmojiStickerIndex: 0,
				hideSendButton: Config.getWFCPlatform() === 1 || Config.getWFCPlatform() === 8,
				showRecorder: false,
				showVoice: false,
				extList: [
					{
						title: '相册',
						tag: 'image',
						icon: 'image'
					},
					{
						title: '语音通话',
						tag: 'voip_a',
						icon: 'voip'
					},
					{
						title: '视频通话',
						tag: 'voip_v',
						icon: 'voip_v'
					},
					{
						title: '拍摄',
						tag: 'shoot',
						icon: 'camera'
					},
					{
						title: '文件',
						tag: 'file',
						icon: 'file'
					}
					// {
					//     title: '位置',
					//     tag: 'location',
					//     icon: 'location'
					// },
					// {
					//     title: '名片',
					//     tag: 'userCard',
					//     icon: 'user_card'
					// },
				],
				msgFocus: false,
				showExt: false,
				showEmoji: false,
				lastInputFocusState: undefined,
				text: '',
				timer: '',
				talkTo: '',
				keyboardHeight: 0,
				currentKeyboardHeight: 0,
				windowHeight: 0,
				longTapItemKey: '',
				// chatWindowData:[],
				localData: {},
				sharedMiscState: store.state.misc,
				sharedConversationState: store.state.conversation,
				mentions: [],
				groupMemberUserInfos: []
			}
		},

		mounted() {
			console.log('mounted', this.conversationInfo)
			if (this.conversationInfo.conversation.type === ConversationType.Group) {
				this.groupMemberUserInfos = store.getGroupMemberUserInfos(
					this.conversationInfo.conversation.target,
					false,
					false
				)
			}
			this.restoreDraft()
		},

		beforeDestroy() {
			this.storeDraft(this.conversationInfo)
		},

		methods: {
			onInput(event) {
				let inserting = false
				if (event.detail.value.length > this.text.length) {
					inserting = true
				}
				this.text = event.detail.value
				const cursor = event.detail.cursor
				if (this.conversationInfo.conversation.type === ConversationType.Group) {
					if (inserting) {
						console.log('ooo', inserting, this.text.charAt(cursor - 1))
						if (inserting && this.text.length > 0 && this.text.charAt(cursor - 1) === '@') {
							const onPickUser = (user) => {
								this.text = this.text.substring(0, cursor - 1) + `@${user.displayName} ` + this.text.substring(cursor)
								this.mentions.push(user)
								this.inputFocus = true
							}
							let atAll = {
								uid: '@all',
								displayName: '所有人',
								portrait: this.conversationInfo.conversation._target.portrait
							}
							this.$pickUser({
								users: [atAll, ...this.groupMemberUserInfos],
								showCategoryLabel: false,
								successCB: onPickUser
							})
						}
					}
				} else {
					// deleting
				}
			},

			mention() {},
			send() {
				if (this.text) {
					let textMessageContent = new TextMessageContent(this.text)
					let quotedMessage = this.sharedConversationState.quotedMessage
					if (quotedMessage) {
						let quoteInfo = QuoteInfo.initWithMessage(quotedMessage)
						textMessageContent.setQuoteInfo(quoteInfo)
						store.quoteMessage(null)
					}
					if (this.conversationInfo.conversation.type === ConversationType.Group && this.mentions.length > 0) {
						const regex = /@\S+(\s|$)/g // 匹配以@开始，后面跟着至少一个非空白字符，并且以空格或行尾结尾的字符串。
						const matches = this.text.match(regex)
						if (matches.length > 0) {
							for (let i = 0; i < matches.length; i++) {
								const match = matches[i].trim()
								if (match === '@所有人') {
									let index = this.mentions.findIndex((user) => user.uid === '@all')
									if (index >= 0) {
										textMessageContent.mentionedType = 2
										break
									}
								} else {
									let index = this.mentions.findIndex((user) => user.displayName === match.substring(1))
									if (index >= 0) {
										let uid = this.mentions[index].uid
										if (!textMessageContent.mentionedTargets) {
											textMessageContent.mentionedTargets = []
										}
										if (textMessageContent.mentionedTargets.indexOf(uid) === -1) {
											textMessageContent.mentionedType = 1
											textMessageContent.mentionedTargets.push(uid)
										}
									}
								}
							}
						}
					}

					wfc.sendConversationMessage(this.conversationInfo.conversation, textMessageContent)
					this.text = ''
					this.mentions = []
					Draft.setConversationDraft(this.conversationInfo.conversation, '', null)
				}
			},

			startRecord() {
				this.$refs['recorder'].startRecord()
				this.sharedMiscState.isRecording = true
			},

			endRecord() {
				this.$refs['recorder'].stopRecord()
				this.sharedMiscState.isRecording = false
			},

			minimizeMessageInputView() {
				this.showEmoji = false
				this.showExt = false
				// 没有 blur 这个方法，奇怪。。。
				// this.$refs.textarea.blur();
				//uni.hideKeyboard();
			},

			onInputFocus() {
				this.showEmoji = false
				this.showExt = false
			},

			toggleVoice() {
				this.showVoice = !this.showVoice
				this.showEmoji = false
				this.showExt = false
			},

			toggleEmoji() {
				console.log('------------- toggleEmoji')
				this.showEmoji = !this.showEmoji
				this.showExt = false
				this.showVoice = false
			},
			toggleExt() {
				this.showExt = !this.showExt
				this.showEmoji = false
				this.showVoice = false
			},

			onClickExt(ext) {
				console.log('onClick ext', ext)
				switch (ext.tag) {
					case 'image':
						this.chooseImage()
						break
					case 'shoot':
						this.chooseVideo()
						break
					case 'file':
						this.chooseFile()
						break
					case 'voip_a':
						this.voip(true)
						break
					case 'voip_v':
						this.voip(false)
						break
					default:
						uni.showToast({
							title: 'TODO ' + ext.title,
							icon: 'none'
						})
						break
				}
			},

			onCategoryClick(i) {
				this.currentEmojiStickerIndex = i
			},

			onClickEmoji(emoji) {
				console.log('onClick emoji', emoji)
				this.text = this.text + emoji
			},
			onClickSticker(sticker) {
				console.log('onClick sticker', sticker)
				let stickerMsg = new StickerMessageContent('', sticker, 200, 200)
				wfc.sendConversationMessage(this.conversationInfo.conversation, stickerMsg)
			},

			chooseImage() {
				uni.chooseImage({
					// count: _self.limit ? _self.limit  - _self.fileList.length : 999,
					sourceType: ['album', 'camera'],
					sizeType: ['original', 'compressed'],
					success: (e) => {
						console.log('choose image', e.tempFilePaths)
						e.tempFilePaths.forEach((path) => {
							let filePath
							if (path.startsWith('file://')) {
								filePath = path.substring('file://'.length)
							} else {
								filePath = plus.io.convertLocalFileSystemURL(path)
							}
							store.sendFile(this.conversationInfo.conversation, filePath)
						})
					}
				})
			},

			voip(audioOnly) {
				if (this.conversationInfo.conversation.type === ConversationType.Single) {
					wfcUIKit.startSingleCall(this.conversationInfo.conversation.target, audioOnly)
				} else if (this.conversationInfo.conversation.type === ConversationType.Group) {
					this.showPickGroupMemberToVoipModal(audioOnly)
				}
			},

			showPickGroupMemberToVoipModal(audioOnly) {
				let beforeClose = (users) => {
					let ids = users.map((u) => u.uid)
					wfcUIKit.startMultiCall(this.conversationInfo.conversation.target, ids, audioOnly)
				}
				this.$pickUsers({
					users: this.groupMemberUserInfos,
					confirmTitle: this.$t('common.confirm'),
					showCategoryLabel: false,
					successCB: beforeClose
				})
			},

			chooseVideo() {
				uni.chooseVideo({
					// count: _self.limit ? _self.limit  - _self.fileList.length : 999,
					sourceType: ['camera'],
					sizeType: ['original', 'compressed'],
					success: (e) => {
						console.log('choose video', e)
						let duration = e.duration
						let path = e.tempFilePath
						let filePath
						if (path.startsWith('file://')) {
							filePath = path.substring('file://'.length)
						} else {
							filePath = plus.io.convertLocalFileSystemURL(path)
						}
						store.sendFile(this.conversationInfo.conversation, filePath, duration)
					}
				})
			},

			chooseFile() {
				wfc.chooseFile('all', (file) => {
					console.log('choose file', file)
					let path = file.path
					let filePath
					if (path.startsWith('file://')) {
						filePath = path.substring('file://'.length)
					} else {
						filePath = plus.io.convertLocalFileSystemURL(path)
					}
					file.path = filePath
					store.sendFile(this.conversationInfo.conversation, file)
				})
			},

			onKeyboardHeightChange(keyboardHeight, currentKeyboardHeight) {
				this.keyboardHeight = keyboardHeight
				this.currentKeyboardHeight = currentKeyboardHeight
			},

			cancelQuote() {
				store.quoteMessage(null)
			},

			restoreDraft() {
				let draft = Draft.getConversationDraftEx(this.conversationInfo)
				if (!draft) {
					return
				}
				console.log('restore draft', this.conversationInfo, draft)
				store.quoteMessage(draft.quotedMessage)
				if (this.text) {
					console.log('inputting, ignore', draft.text)
				} else {
					// this.text = draft.text.replace(/ /g, '&nbsp').replace(/\n/g, '<br>');
					this.text = draft.text
				}
			},

			storeDraft(conversationInfo) {
				if (!this.text) {
					return
				}

				let quotedMessage = this.sharedConversationState.quotedMessage
				let draftText = this.text.trim()
				let quoteInfo = quotedMessage ? QuoteInfo.initWithMessage(quotedMessage) : null

				if (draftText.length === 0) {
					if (conversationInfo.draft !== '') {
						Draft.setConversationDraft(conversationInfo.conversation, draftText, quoteInfo)
					}
				} else {
					if (draftText !== conversationInfo.draft) {
						Draft.setConversationDraft(conversationInfo.conversation, draftText, quoteInfo)
					}
				}
			}
		},
		computed: {
			// quotedMessage() {
			//     lastQuotedMessage = this.sharedConversationState.quotedMessage;
			//     return this.sharedConversationState.quotedMessage;
			// },
			inputFocus() {
				return !this.showExt && !this.showEmoji && !this.showVoice
			}
		}
	}
</script>

<style scoped>
	/*.message-input-container {*/
	/*    display: flex;*/
	/*    align-items: center;*/
	/*    width: 100%;*/
	/*    position: fixed;*/
	/*    bottom: 0;*/
	/*    background: lightgrey;*/
	/*}*/

	/*.message-input-container input {*/
	/*    flex: 1;*/
	/*}*/

	.wf-message-input-container {
		background: #f7f7f7;
		/*background: red;*/
		width: 100%;
		z-index: 9999;
		transition: all 0.1s;
		/*background: red;*/
	}

	.wf-ext-container {
		width: 100%;
		background-color: #f7f7f7;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	.wf-ext-item {
		padding: 35rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.wf-ext-item-icon {
		background-color: #fff;
		width: 110rpx;
		height: 110rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 12rpx;
	}

	.wf-ext-item-icon .wxfont {
		color: #181818;
		font-size: 64rpx;
	}

	.wf-ext-item-text {
		font-size: 24rpx;
		color: #666;
		margin-top: 16rpx;
	}

	.wf-message-input-toolbar {
		position: relative;
		z-index: 3;
		padding: 16rpx 12rpx;
		box-sizing: border-box;
		display: flex;
		width: 100%;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-around;
		border: 1rpx #ddd solid;
		border-left: none;
		border-right: none;
	}

	.wf-message-input-toolbar .wf-tk-send-tool-btn {
		transition: color 0.5s;
	}

	.wf-input-text-container {
		overflow: auto;
		margin: 0 12rpx;
		min-height: 75rpx;
		background-color: #fff;
		border-radius: 24rpx;
		padding-top: 18rpx;
		max-height: 225rpx;
		box-sizing: border-box;
	}

	.quote-message-container {
		overflow: auto;
		display: flex;
		background: #ebefef;
		align-content: center;
		position: relative;
		margin: 0 12rpx;
		padding: 5px;
		border-radius: 24rpx;
	}

	.quote-message-container .quoted-message {
		max-width: 250px;
	}

	.quote-message-container .cancel {
		position: absolute;
		right: 0;
		top: 0;
		padding: 0 5px;
		color: grey;
		transform: translate(0, 50%);
	}

	.wf-message-input-container .wf-input-textarea {
		padding: 0 24rpx;
		box-sizing: border-box !important;
		width: 100%;
		background: #fff;
	}

	.wf-input-voice-container {
		box-sizing: border-box;
		margin: 0 12rpx;
		width: 100%;
		height: 75rpx;
		border-radius: 24rpx;
		background: #fff;
		display: flex;
		flex: 1;
		flex-direction: row;
		align-items: center;
	}

	.wf-input-voice-button {
		text-align: center;
		font-size: 24rpx;
		line-height: 75rpx;
		flex: 1;
	}

	.wf-input-voice-button:nth-child(1) {
		border-right: 1rpx #eee solid;
	}

	.wf-input-text-send-button {
		white-space: nowrap;
		padding: 10rpx 24rpx;
		border-radius: 12rpx;
		border: 1rpx #ddd solid;
		background: #f7f7f7;
		color: #ddd;
	}

	.wf-input-button-icon {
		font-size: 64rpx;
		color: #333;
	}

	.wf-voice-recorder {
		width: 250rpx;
		height: 250rpx;
		left: 50%;
		transform: translateX(-50%);
		bottom: 680rpx;
		box-sizing: border-box;
		text-align: center;
		position: fixed;
		border-radius: 50%;
		background-color: #f8f8f8;
		box-shadow: 0rpx 4rpx 10rpx rgba(0, 0, 0, 0.05);
		padding: 20rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.popsendCard {
		display: flex;
		background-color: #fff;
		overflow: auto;
	}

	.popsendCard-close {
		width: 100%;
		text-align: center;
		height: 70rpx;
		line-height: 70rpx;
		font-size: 42rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
	}

	.wf-emoji-container {
	}

	.wf-emoji-content {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.emoji-item {
		font-size: 44rpx;
		width: 93rpx;
		height: 93rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.wf-stickers-container {
		min-height: 60rpx;
		width: 100%;
		flex-direction: column;
	}

	.wf-stickers-container .category-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		z-index: 99;
		width: 100%;
		height: 60px;
		border-bottom: 1px solid grey;
	}

	.wf-stickers-container .category {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.wf-stickers-container .category img {
		width: 40px;
		height: 40px;
		padding: 5px;
		margin: 0 5px;
		border-radius: 5px;
		object-fit: contain;
	}

	.wf-stickers-container .category img.active {
		background: lightgrey;
	}

	.wf-sticker-container {
	}

	.wf-sticker-content {
		height: 100%;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-around;
		align-content: flex-start;
		padding: 10px 0;
	}

	.sticker-item {
		height: 33%;
		aspect-ratio: 1/1;
		padding: 8rpx;
		border-radius: 5px;
	}

	.sticker-item:active {
		background: lightgrey;
	}
</style>
